<template>
    <div class="A">
        <div class="a">
            <h1>
                物易近~方便您的生活
            </h1>
        </div>
        <div class="b">
            <div class="q" @click="yes()">
                <div class="a1" >
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nuli"></use>
                      </svg>
                </div>
                <h1>确定进入</h1>
                <h3>又是开始赚钱的一天！</h3>
            </div>
            <div class="w" @click="no()">
                <div class="a1">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bumanyi"></use>
                      </svg>
                </div>
                <h1>取消进入</h1>
                <h3>我还要再考虑考虑</h3>
            </div>
            <div class="e" @click="message()">  
                <div class="a1">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liuyan1"></use>
                      </svg>
                </div>
                <h1>留言板</h1>
                <h3>我对物易近有话说</h3>
            </div>
        </div>
        <div class="c">
            <div class="p">
                <h1>
                    物易近
                </h1>
            </div>
            <div class="o">
                <span>当您因为种种原因只有一些零散时间<br>
                    不愿荒废，可这些时间做别的兼职又不够用<br>
                    这时候就可以使用我们物易近了！<br>
                    运用零散时间帮助同学跑腿<br>
                    同时自己也能赚取零花钱<br>
                    加油！跑腿人
                </span>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        methods: {
                yes(){
                    this.$router.push({name:"workers"})
                },
                no(){
                    this.$router.push({name:"workerlogin"})
                },
                message(){
                    this.$router.push({name:"wmessage"})
                }
            },
    }
</script>


<style lang="scss" scoped>

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  
.A{
    background:url("../assets/img/workersf.gif");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
    .a{
        background-color: rgba(0,0,0,.1);
        width: 100%;
        height: 70px;
        text-align: center;
        h1{
            font-size: 30px;
            padding-top:10px;
        }
    }
    .b{
        display: flex;
        width: 100%;
        margin-top: 10px;
        height:350px;
        .q{
            margin-top: 70px;
            background-image:linear-gradient(45deg,rgb(227,219,255),rgb(244,164,209),rgb(216,191,253));
            margin-left: 100px;
            width: 25%;
            height: 220px;
            text-align: center;
            .a1{
                border:1px solid #dccfcf;
                box-shadow: 0 0 25px #909399;
                background-color:#fff;
                width: 100px;
                height: 100px;
                border-radius: 100px;
                margin-top: 20px;
                margin-left: 160px;
                svg{
                    margin-top: 10px;
                    font-size: 80px;
                    color: rgb(244, 19, 19);
                }
                h1{
                    padding-top: 10px;
                }
                h3{
                    padding-top: 30px;
                }
            }

        }
        .w{
            margin-top: 70px;
            background-image:linear-gradient(45deg,rgb(244,164,209),rgb(216,200,255),rgb(244,126,182));
            margin-left: 80px;
            width: 25%;
            height: 220px;
            text-align: center;
            .a1{
                border:1px solid #dccfcf;
                box-shadow: 0 0 25px #909399;
                background-color:#fff;
                width: 100px;
                height: 100px;
                border-radius: 100px;
                margin-top: 20px;
                margin-left: 160px;
                svg{
                    margin-top: 10px;
                    font-size: 80px;
                    color: rgb(19, 184, 244);
                }
                h1{
                    padding-top: 10px;
                }
                h3{
                    padding-top: 30px;
                }
            }
        }
        .e{
            margin-top: 70px;
            background-image:linear-gradient(45deg,rgb(255,217,235),rgb(216,200,255),rgb(229,168,207));
            margin-left: 80px;
            width: 25%;
            height: 220px;
            text-align: center;
            .a1{
                border:1px solid #dccfcf;
                box-shadow: 0 0 25px #909399;
                background-color:#fff;
                width: 100px;
                height: 100px;
                border-radius: 100px;
                margin-top: 20px;
                margin-left: 160px;
                svg{
                    margin-top: 10px;
                    font-size: 80px;
                    color: rgb(244, 19, 19);
                }
                h1{
                    padding-top: 10px;
                }
                h3{
                    padding-top: 30px;
                }
            }
        }
    }

    .c{
        width: 500px;
        height: 280px;
        margin-left: 80px;
        text-align: center;
        .p{
            margin-top: 30px;
            font-size: 28px;
        }
        .o{
            font-size: 20px;
            margin-top: 10px;
        }
    }
}
</style>